<%@ page import="cn.cooode.activityTools.entity.Activity" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Evo Calendar</title>

    <meta charset="UTF-8">
    <meta name="description" content="Simple Modern-looking Event Calendar Plugin">
    <meta name="keywords" content="jQuery, Plugin, Event, Calendar, EvoCalendar">
    <meta name="author" content="Edlyn Villegas">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Core Stylesheet -->
    <link rel="stylesheet" href="/resources/css/evo-calendar.css" />
    <!-- Optional Themes -->
    <link rel="stylesheet" href="/resources/css/evo-calendar.midnight-blue.css" />
    <link rel="stylesheet" href="/resources/css/evo-calendar.orange-coral.css" />
    <link rel="stylesheet" href="/resources/css/evo-calendar.royal-navy.css" />
    <!-- JavaScript -->
    <script src="/resources/jquery/jQuery-2.1.4.min.js"></script>
    <script src="/resources/js/evo-calendar.js"></script>
</head>
<body>
<div id="evoCalendar"></div>
</body>
<script>
    $(document).ready(function() {

        var today = new Date();

        var week_date = [];

        function getWeeksInMonth(a, b) {
            var c = [], d = new Date(b, a, 1), e = new Date(b, a + 1, 0), f = e.getDate();
            var g = 1;
            var h = 7 - d.getDay();
            while (g <= f) {
                c.push({
                    start: g,
                    end: h
                });
                g = h + 1;
                h += 7;
                if (h > f) h = f;
            }
            return c;
        }

        week_date = getWeeksInMonth(today.getMonth(), today.getFullYear())[2];

        console.log(today.getMonth() + 1 + "/" + week_date.start + "/" + today.getFullYear(), today.getMonth() + 1 + "/" + week_date.end + "/" + today.getFullYear())

        var activitys = [
            <c:forEach items='${activitys}' var="activity">
            {
                name: '${activity.name}',
                id: '${activity.id}',
                <%--organizer: '${activity.organizer}',--%>
                <%--location: '${activity.location}',--%>
                date: '${activity.startTime}',
                description: '${activity.description}',
                <%--publishTime: '${activity.publishTime}',--%>
                <%--categoryName: '${activity.category.name}',--%>
                <%--author: '${activity.author.username}',--%>
                <%--round: '${activity.round}',--%>
                type: "birthday"
            },
            </c:forEach>
        ];
        console.log(activitys)


        $("#evoCalendar").evoCalendar({
            format: "MM dd, yyyy",
            language: 'zh',
            titleFormat: "MM",
            calendarEvents: activitys,
        });

        $('#evoCalendar').evoCalendar({
            // options here
        })
            .on('selectDate', function(newDate, oldDate) {
                // do something
                console.log("selectDate")
            })
            .on('selectMonth', function(activeMonth, monthIndex) {
                // do something
                console.log("selectMonth")
            })
            .on('selectYear', function(activeYear) {
                // do something
                console.log("activeYear")
            })
            .on('selectEvent', function(activeEvent,data) {
                // do something
                console.log(activeEvent)
                console.log(data.id)
                window.location.href="/activity/"+data.id
            })
            .on('destroy', function(calendar) {
                // do something
                console.log("calendar")

            })
    });
</script>
</html>